<template>
  <zm-view ref="view">
    <view class="bg-white">
      <zm-tabs v-model="tabType" :list="tabs" @change="handleTabChange"> </zm-tabs>
    </view>
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in list" :key="index" class="flex flex-col mx-24 mt-20 px-14 py-30 radius-16 bg-white">
        <view class="flex flex-1">
          <u-image :src="item.imageUrl" width="180rpx" height="120rpx" radius="10rpx"></u-image>
          <view class="flex flex-col justify-between flex-1 ml-22">
            <view class="flex items-center">
              <text class="text-justify">转赠礼物：</text>
              <text>{{ item.giftType === "card" ? cardName : "优惠券" }}</text>
            </view>
            <view class="flex items-center" @click.stop="onClickDetail(item)">
              <view class="flex items-center">
                <text class="text-justify">转赠数量：</text>
                <text>{{ item.giftNumber }}张</text>
                <zm-icon-text name="warning-o" size="26rpx" weight="bold"></zm-icon-text>
              </view>
            </view>
            <view v-if="tabType === 'send'" class="flex items-center">
              <text class="text-justify">转赠时间：</text>
              <text>{{ item.createTime }}</text>
            </view>
            <view v-if="item.receiveTime" class="flex items-center">
              <text class="text-justify">领取时间：</text>
              <text>{{ item.receiveTime }}</text>
            </view>
            <view v-if="item.receiveMobile" class="flex items-center">
              <text class="text-justify">领取人：</text>
              <text>{{ item.receiveMobile }}</text>
            </view>
            <view v-if="item.sendMemberMobile" class="flex items-center">
              <text class="text-justify">赠送人：</text>
              <text>{{ item.sendMemberMobile }}</text>
            </view>
          </view>
          <text :style="[statusStyle(item)]"> {{ item.orderStatus | useDict("SEND_ORDER_STATUS") }} </text>
        </view>
        <view v-if="tabType === 'send' && item.orderStatus == 0" class="flex justify-end mt-24">
          <!-- #ifdef MP-WEIXIN -->
          <zm-button size="small" text-size="26rpx" height="54rpx" round plain open-type="share" @click="handleSend(item)">发送给好友</zm-button>
          <!-- #endif -->
          <!-- #ifdef WEB -->
          <zm-button size="small" text-size="26rpx" height="54rpx" round plain @click="handleSend(item)">发送给好友</zm-button>
          <!-- #endif -->
        </view>
      </view>
    </zm-list>
    <zm-popup
      :show="detailPopup"
      mode="center"
      border-radius="24rpx"
      max-height="766rpx"
      width="80vw"
      :background="useColor('page')"
      :close-on-click-overlay="false"
      @closed="orderInfo = {}"
    >
      <view slot="header" class="font-36 font-700 pt-45 text-center">转赠详情</view>
      <view class="px-40 pb-40 pt-15">
        <view v-for="(item, index) in orderInfo.detailList" :key="index" class="mt-20">
          <coupon v-if="item.giftType == 'coupon'" :info="item.info" from-type="giftGiving" :show-tag="false"></coupon>
          <film-card v-if="item.giftType == 'card'" :info="item.info"></film-card>
        </view>
      </view>
      <view slot="outside" class="close-btn" @click="detailPopup = false">
        <zm-icon name="close" color="#ffffff" size="48rpx"></zm-icon>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      tabs: [
        { text: "我送出的", value: "send" },
        { text: "我领取的", value: "receive" }
      ],
      tabType: "send",
      list: [],
      options: {
        emptyText: "暂无赠送记录"
      },
      orderInfo: {},
      detailPopup: false,
      shareInfo: {},
      isButtonShare: false
    }
  },
  computed: {
    ...mapGetters(["cardName"]),
    option() {
      return { emptyText: this.tabType == "send" ? "暂无送出记录" : "暂无领取记录", offsetBottom: 100, safeArea: false }
    },
    statusStyle() {
      return (item) => {
        const style = { color: "#999999" }
        const dict = this.useDictItem("SEND_ORDER_STATUS", item.orderStatus)
        if (dict) style.color = this.useColor(dict.color)
        return style
      }
    },
    lsitApi() {
      const apis = { send: uni.$api.send.getSendList, receive: uni.$api.send.getReceiveList }
      return apis[this.tabType]
    }
  },
  onLoad() {},
  async onShareAppMessage({ form }) {
    if (form === "button") await uni.$delay(100)
    return this.shareInfo
  },
  methods: {
    handleTabChange() {
      this.list = []
      this.$refs.list.refresh()
    },
    // 点击发送
    handleSend(item) {
      // #ifdef APP-PLUS
      // #endif
      // #ifdef WEB
      const { origin, pathname, search } = window.location
      const baseUrl = `${origin}${pathname}${search}#/pages/person/gift-giving-receive/gift-giving-receive`
      const params = { evn: this.webEvn, orderId: item.orderId }
      if (this.pwy) params.pwy = this.pwy
      uni.setClipboardData({
        data: baseUrl + uni.$encodeParams(params),
        showToast: false,
        success: () => {
          this.$toast("分享链接已复制到剪贴板")
        }
      })
      // #endif
      // #ifdef MP-WEIXIN
      this.isButtonShare = true
      this.shareInfo = {
        title: item.blessWord,
        path: `/pages/person/gift-giving-receive/gift-giving-receive?orderId=${item.orderId}`,
        imageUrl: item.imageUrl
      }
      // #endif
    },
    async onClickDetail(item) {
      this.orderInfo = await uni.$api.send.getOrderInfo({ orderId: item.orderId })
      this.detailPopup = true
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await this.lsitApi({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-block {
  flex: 1;
  color: #fff;
  overflow: hidden;
  padding: 10rpx 0rpx;
  border-radius: 8rpx;
  text-align: center;
}
.demo-block-2 {
  flex: 1;
  color: #fff;
  overflow: hidden;
  padding: 20rpx 0rpx;
  border-radius: 8rpx;
  text-align: center;
}
.demo-block-3 {
  flex: 1;
  color: #fff;
  overflow: hidden;
  padding: 30rpx 0rpx;
  border-radius: 8rpx;
  text-align: center;
}
.primary-color {
  background-color: var(--theme-color);
}
.h-120 {
  height: 120rpx;
}
.close-btn {
  left: 50%;
  bottom: -100rpx;
  position: absolute;
  transform: translateX(-50%);
}
.text-justify {
  width: 120rpx;
  text-align: justify;
  text-align-last: justify;
}
</style>
